<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <!-- 标题 -->
      <div class="header">
        <h2>AI大模型</h2>
      </div>

      <!-- 聊天窗口 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="24">
          <el-card shadow="hover" class="card chat-card">
            <div class="chat-window" ref="chatWindow">
              <div v-for="(message, index) in messages" :key="index" class="message">
                <div :class="['message-bubble', message.sender]">{{ message.content }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 输入区域 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="input-area">
            <el-input v-model="userInput" placeholder="请输入您的问题..." @keyup.enter="sendMessage"></el-input>
            <el-button type="primary" @click="sendMessage" :loading="loading">发送</el-button>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
import AsideLayout from '@/layout/asideLayout.vue'

export default {
  name: 'ElderlyAI',
  components: {
    AsideLayout
  },
  data() {
    return {
      userInput: '', // 用户输入的消息
      messages: [],   // 聊天记录
      loading: false, // 按钮加载状态
    };
  },
  methods: {
    async sendMessage() {
      if (!this.userInput.trim()) return; // 如果没有输入消息，直接返回

      // 添加用户的消息到聊天记录中
      this.messages.push({ sender: 'user', content: this.userInput });

      // 显示加载状态
      this.loading = true;

      try {
        // 发送消息到后端服务器，获取AI的响应
        const response = await axios.post('http://localhost:3000/api/ai/message', { message: this.userInput });

        // 获取AI的回答并更新聊天记录
        const data = response.data;
        if (data && data.choices && data.choices[0].message) {
          this.messages.push({ sender: 'ai', content: data.choices[0].message.content });
        } else {
          this.messages.push({ sender: 'ai', content: '抱歉，未能获取有效的回答。' });
        }

        // 更新聊天窗口
        this.$nextTick(() => {
          const chatWindow = this.$refs.chatWindow;
          chatWindow.scrollTop = chatWindow.scrollHeight; // 保持滚动到底部
        });

      } catch (error) {
        console.error('Error sending message:', error);
        this.messages.push({ sender: 'ai', content: '抱歉，我遇到了一些问题，无法回复。' });
      } finally {
        // 结束加载状态
        this.loading = false;
      }

      // 清空输入框
      this.userInput = '';
    }
  }
};
</script>

<style scoped>
.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.chat-card {
  height: 66vh; /* 占据屏幕的2/3 */
}

.chat-window {
  width: 1580px; /* 设置聊天窗口的宽度 */
  height: 500px; /* 设置聊天窗口的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  border: 1px solid #ccc; /* 可选：添加边框 */
  padding: 10px; /* 可选：添加内边距 */
  background-color: #e0f63a;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 将内容对齐到右侧 */
}

.message {
  margin-bottom: 15px;
  width: 100%; /* 确保消息宽度占满容器 */
  display: flex;
  justify-content: flex-end; /* 将消息内容对齐到右侧 */
}

.message-bubble {
  padding: 12px;
  border-radius: 12px;
  display: inline-block;
  max-width: 70%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.message-bubble.user {
  text-align: right;
  color: #ffffff;
  background-color: #409EFF;
  margin-left: auto;
}

.message-bubble.ai {
  text-align: left;
  color: #333333;
  background-color: #f0f9eb;
  margin-right: auto;
}

.message-bubble.user:hover,
.message-bubble.ai:hover {
  transform: scale(1.02);
}

.input-area {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.el-input {
  flex: 1;
  border-radius: 8px;
}

.el-button {
  border-radius: 8px;
}
</style>